<template>
	<scroll-view class="home-scroll" :scroll-y="true" @scrolltolower="loadMoreFeatured">
		<!-- <web-view :src="iframeUrl"></web-view> -->
		<!-- 背景图片 -->
		<image class="home-bg" :src="IMAGE_URL + '/static/index/top_bg.png'" mode="aspectFill"></image>

		<header-vue :title="title" titPosition="left" bgColor="transparent" titleColor="#fff"></header-vue>

		<!-- 1. 顶部地区搜索和消息 -->
		<view class="address-selector">
			<view class="location-selector" @click="clickCitySelector">
				<u-icon name="map" color="#fff" size="32rpx"></u-icon>
				<text class="location-text">{{ selectedCity }}</text>
				<u-icon name="arrow-down-fill" color="#fff" size="20rpx"></u-icon>
			</view>
			<view class="header-right">
				<view class="search-btn" @click="goToSearch">
					<i class="iconfont icon-search font40" style="color: #fff;"></i>
				</view>
				<view class="message-btn" @click="goToMessage">
					<u-icon name="bell-fill" color="#fff" size="44rpx"></u-icon>
					<view class="message-badge" v-if="messageCount > 0">{{ messageCount }}</view>
				</view>
			</view>
		</view>

		<!-- 2. Swiper Banner -->
		<view class="banner-section">
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
				indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
				<swiper-item v-for="(banner, index) in bannerList" :key="index" @click="goToBannerDetail(banner)">
					<view class="banner-item">
						<image :src="banner" class="banner-image" mode="aspectFill" style="width: 100%; height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 3. 第三部分：左侧小图片和右侧上下图片 -->
		<view class="section-three">
			<view class="left-image" @click="clickSqEvent(1)">
				<view class="text-box">
					<view class="text-title">邻里邻工</view>
					<view class="text-subtitle">琐事代办 就找邻工</view>
					<view class="text-button">立即预约</view>
				</view>
				<image :src="IMAGE_URL + '/static/index/icon7.png'" class="icon7" mode="aspectFit" style="width: 168rpx; height: 176rpx;"></image>
			</view>
			<view class="right-images">
				<view class="top-image" @click="clickSqEvent(3,1)">
					<view class="text-box">
						<view class="text-subtitle">CAPITAL</view>
						<view class="text-title">社区资讯</view>
					</view>
					<image :src="IMAGE_URL + '/static/index/icon5.png'" class="icon5" mode="aspectFit" style="width: 176rpx; height: 140rpx;"></image>
				</view>
				<view class="bottom-image" @click="goToPage({url:'/views/housekeep/service'})">
					<view class="text-box">
						<view class="text-subtitle">SEVRVE</view>
						<view class="text-title">家政服务</view>
					</view>
					<image :src="IMAGE_URL + '/static/index/icon6.png'" class="icon6" mode="aspectFit" style="width: 176rpx; height: 140rpx;"></image>
				</view>
			</view>
		</view>

		<!-- 4. 第四部分：按钮图片网格 -->
		<view class="button-grid">
			<view class="grid-item" v-for="(item, index) in buttonList" :key="index" @click="goToPage(item)">
				<image :src="IMAGE_URL + item.icon" mode="aspectFit" style="width: 117rpx; height: 117rpx;"></image>
				<text class="grid-text">{{ item.text }}</text>
			</view>
		</view>

		<!-- 5. 第五部分：通知 -->
		<view class="notice-section" @click="goToNoticeDetail">
			<view class="notice-content">
				<image :src="IMAGE_URL + '/static/index/icon3.png'" style="width: 40rpx; height: 40rpx;"></image>
				<view class="notice-text"><text class="tip">通知</text> {{ noticeData.title }}</view>
			</view>
		</view>

		<view class="flex between six-box">
			<!-- 热门推荐 -->
			<view class="recommend-section">
				<view class="section-header">
					<text class="section-title"><i class="iconfont icon-remen"></i>热门推荐</text>
					<view class="more-btn" @click="goToMore('hot')">
						<text>更多</text>
						<u-icon name="arrow-right" color="#444" size="18rpx"></u-icon>
					</view>
				</view>
				<view class="recommend-list">
					<view class="recommend-item" v-for="(item, index) in hotRecommendList" :key="index"
						@click="goToServiceDetail(item)">
						<view class="top-box">
						<image :src="item.image" class="recommend-image" mode="aspectFill" style="width: 100%; height: 100%;"></image>
							<view class="recommend-name">{{ item.name }}</view>
						</view>
						<view class="recommend-info">
							<view class="recommend-price flex">
								<view class="flex" v-if="item.positive_rate.toString().includes('.')">
									<view class="font20">￥</view>
									<view class="font24">{{ item.positive_rate.toString().split('.')[0] }}</view>
									<view class="font20">.{{ item.positive_rate.toString().split('.')[1] }}</view>
								</view>
								<view class="flex" v-else>
									<view class="font20">￥</view>
									<view class="font24">{{ item.positive_rate }}</view>
									<view class="font20">.00</view>
								</view>
								<view class="time font16">
									/{{ item.price_unit }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 限时秒杀 -->
			<view class="flash-sale-section">
				<view class="section-header">
					<text class="section-title"><i class="iconfont icon-xianshimiaosha-06 font30"></i>限时秒杀</text>
					<view class="more-btn" @click="goToMore('flash')">
						<text>更多</text>
						<u-icon name="arrow-right" color="#444" size="18rpx"></u-icon>
					</view>
				</view>
				<view class="flash-list">
					<view class="flash-item" v-for="(item, index) in hotRecommendList" :key="index"
						@click="goToServiceDetail(item)">
						<view class="top-box">
						<image :src="item.image" class="flash-image" mode="aspectFill" style="width: 100%; height: 100%;"></image>
							<view class="flash-name">{{ item.name }}</view>
						</view>
						<view class="flash-info">
							<view class="flash-price flex">
								<view class="flex" v-if="item.positive_rate.toString().includes('.')">
									<view class="font20">￥</view>
									<view class="font24">{{ item.positive_rate.toString().split('.')[0] }}</view>
									<view class="font20">.{{ item.positive_rate.toString().split('.')[1] }}</view>
								</view>
								<view class="flex" v-else>
									<view class="font20">￥</view>
									<view class="font24">{{ item.positive_rate }}</view>
									<view class="font20">.00</view>
								</view>
								<view class="time font16">
									/{{ item.price_unit }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 服务精选 -->
		<view class="featured-section">
			<!-- 装饰图标 -->
			<image class="featured-icon" :src="IMAGE_URL + '/static/index/icon4.png'" mode="aspectFit"></image>
			
			<view class="section-header">
				<i class="iconfont icon-diamond font30"></i>
				<view class="section-title">
					<text class="sub-tit">SELECTED</text>
					<text class="tit">服务精选</text>
				</view>
			</view>
			<view class="featured-list">
				<view class="featured-card" v-for="(item, index) in featuredList" :key="index" @click="goToServiceDetail(item)">
					<view class="featured-top">
						<image :src="item.image" style="width: 100%; height: 260rpx;" mode="aspectFill"></image>
					</view>
					<view class="featured-meta">
						<view class="featured-name-overlay">{{ item.name }}</view>
						<view class="price flex">
							<view class="flex" v-if="item.positive_rate && item.positive_rate.toString().includes('.')">
								<view class="font24">￥</view>
								<view class="font32">{{ item.positive_rate.toString().split('.')[0] }}</view>
								<view class="font20">.{{ item.positive_rate.toString().split('.')[1] }}</view>
							</view>
							<view class="flex" v-else>
								<view class="font24">￥</view>
								<view class="font32">{{ item.positive_rate }}</view>
								<view class="font24">.00</view>
							</view>
							<view class="time font20">/{{ item.price_unit }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-footer">
				<text v-if="featuredLoading">正在加载...</text>
				<text v-else-if="!featuredHasMore">已经加载全部</text>
			</view>
		</view>
		

		<!-- 城市选择弹窗 -->
		<u-picker :show="showCityPicker" :columns="[cityOptions]" @confirm="onCityConfirm"
			@cancel="showCityPicker = false"></u-picker>
</scroll-view>

</template>

<script>
import headerVue from '@/components/header'
import { getCommunitynewsNoticeList, getHousekeepServiceList } from '@/api/index.js'
import appConfig from '@/config/app.js'
import { getRegeoEvent } from '@/utils/address.js'

export default {
	components: {
		headerVue
	},
	data() {
		return {
			IMAGE_URL: appConfig.IMAGE_URL,
			title: '北京',
			selectedCity: '北京',
			showCityPicker: false,
			messageCount: 2,
			cityOptions: [
				{ text: '雄安新区', value: 'xiongan' },
				{ text: '保定市', value: 'baoding' },
				{ text: '石家庄市', value: 'shijiazhuang' },
				{ text: '唐山市', value: 'tangshan' }
			],
			bannerList: [
				'/static/banner.png',
				'/static/banner.png',
			],
			buttonList: [
				{ icon: '/static/index/btn_icon1.png', text: '好评榜单', url: '/views/index/hp-rank' },
				{ icon: '/static/index/btn_icon2.png', text: '服务套餐', url: '/views/index/servicePackage' },
				{ icon: '/static/index/btn_icon3.png', text: '生活缴费', url: '/views/index/life-payment' },
				{ icon: '/static/index/btn_icon4.png', text: '意见建议', url: '/views/index/feedback' },
				{ icon: '/static/index/btn_icon5.png', text: '领券中心', url: '/views/mine/couponCenter' },
				{ icon: '/static/index/btn_icon6.png', text: '技能培训', url: '/' },
				{ icon: '/static/index/btn_icon7.png', text: '闲置交易', url: '3' },
				{ icon: '/static/index/btn_icon8.png', text: '联系客服', url: '/views/index/customer-service' }
			],
			noticeData: {
				title: '关于本周停水通知',
				id: null
			},
			hotRecommendList: [],
			flashSaleList: [],
			featuredList: [],
			// 服务精选分页
			featuredPage: 1,
			featuredLimit: 6,
			featuredHasMore: true,
			featuredLoading: false,
			iframeUrl: ''
		}
	},
	computed: {
		addressComponent() {
			return this.$store && this.$store.state ? this.$store.state.addressComponent : null
		}
	},
	mounted() {
		this.getNoticeData()
		this.getFeaturedData()
		this.updateLocationFromAddressComponent()
	},
	watch: {
		addressComponent: {
			deep: false,
			immediate: false,
			handler() {
				this.updateLocationFromAddressComponent()
			}
		}
	},
	methods: {
		clickCitySelector() {
			// #ifdef MP
			wx.chooseLocation({
				latitude: this.addressComponent.latitude,
				longitude: this.addressComponent.longitude,
				success: (res) => {
					const location = `${res.longitude},${res.latitude}`
					getRegeoEvent(location)
				}
			})
			// #endif
			// #ifndef MP
			// this.showCityPicker = true
			// #endif
		},
		// 从全局逆地理结果更新首页顶部文案
		updateLocationFromAddressComponent() {
			const ac = this.addressComponent || {}
			// selectedCity 优先级：district > city > province > country > 北京
			const district = ac.district || ''
			const city = ac.city || ''
			const province = ac.province || ''
			const country = ac.country || ''
			this.selectedCity = district || city || province || country || '北京'

			// title 优先级：neighborhood.name > building.name > streetNumber.street > selectedCity
			const neighborhoodName = ac.neighborhood && ac.neighborhood.name.length > 0 ? ac.neighborhood.name[0] : ''
			const buildingName = ac.building && ac.building.name.length > 0 ? ac.building.name : ''
			const businessAreasName = ac.businessAreas && ac.businessAreas.length > 0 ? ac.businessAreas[0].name : ''
			const streetName = ac.streetNumber && ac.streetNumber.street ? ac.streetNumber.street : ''
			console.log(neighborhoodName, buildingName, businessAreasName, streetName)
			this.title = neighborhoodName || buildingName || businessAreasName || streetName || this.selectedCity
		},
		// 获取服务热门数据
		async getFeaturedData() {
			const res = await getHousekeepServiceList({ page: 1, limit: 2, is_hot: 1 })
			if (res.errno === 0 && res.data.list.length > 0) {
				this.hotRecommendList = res.data.list
			}
		},
		// 获取服务限时秒杀数据
		async getFlashSaleData() {
			// const res = await getHousekeepServiceList({ page: 1, limit: 2, is_flash_sale: 1 })
			// if (res.errno === 0 && res.data.list.length > 0) {
			// 	this.flashSaleList = res.data.list
			// }
		},
		clickSqEvent(url,tab) {
			this.$emit('clickSqEvent', {url:url,tab:tab})
		},
		// 获取通知数据
		async getNoticeData() {
			try {
				const res = await getCommunitynewsNoticeList({ page: 1, limit: 1 })
				if (res.errno === 0 && res.data.list.length > 0) {
					this.noticeData = {
						title: res.data.list[0].title,
						id: res.data.list[0].id
					}
				}
			} catch (error) {
				console.error('获取通知数据失败:', error)
			}
		},
		// 城市选择确认
		onCityConfirm(e) {
			this.selectedCity = e.value[0].text
			this.showCityPicker = false
		},
		// 跳转到搜索页面
		goToSearch() {
			uni.navigateTo({
				url: '/views/shop/search'
			})
		},
		// 跳转到消息页面
		goToMessage() {
			uni.navigateTo({
				url: '/views/index/news'
			})
		},
		// 跳转到通知详情
		goToNoticeDetail() {
			if (this.noticeData.id) {
				uni.navigateTo({
					url: `/views/community/notice-detail?id=${this.noticeData.id}`
				})
			}
		},
		// 跳转到Banner详情
		goToBannerDetail(banner) {
			console.log('Banner详情:', banner)
		},
		// 跳转到页面
		goToPage(item) {
			if (item.url == 3) {
				this.clickSqEvent(3,3)
				return;
			}
			uni.navigateTo({
				url: item.url
			})
		},
		// 跳转到更多页面
		goToMore(type) {
			uni.navigateTo({
				url: '/pages/community/community'
			})
		},
		// 跳转到服务详情
		goToServiceDetail(item) {
			uni.navigateTo({
				url: `/pages/shop/shop?id=${item.id}`
			})
		},
		// 触底加载更多服务精选
		async loadMoreFeatured() {
			if (this.featuredLoading || !this.featuredHasMore) return
			this.featuredLoading = true
			try {
				// 模拟接口请求，可替换为真实接口
				const res = await getHousekeepServiceList({ page: this.featuredPage, limit: this.featuredLimit })
				const more = res.data.list
				this.featuredList = this.featuredList.concat(more)
				this.featuredPage += 1
				if (this.featuredPage >= res.data.total) {
					this.featuredHasMore = false
				}
			} finally {
				this.featuredLoading = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.home-scroll {
	height: 100%;
	position: relative;
}

.home-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 300rpx;
	z-index: 0;
}

/* 1. 顶部地区搜索和消息 */
.address-selector {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	padding: 0 32rpx;
	position: relative;
	z-index: 1;

	/* #ifdef MP */
	margin-top: 20rpx;
	/* #endif */
}

.location-selector {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.location-text {
	font-size: 30rpx;
	color: #fff;
	font-weight: 500;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.search-btn,
.message-btn {
	width: 64rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.message-badge {
	position: absolute;
	top: 6rpx;
	right: 12rpx;
	width: 16rpx;
	height: 16rpx;
	background: #FF4444;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16rpx;
	color: #fff;
}

/* 2. Swiper Banner */
.banner-section {
	margin: 16rpx 32rpx;
	position: relative;
	z-index: 1;
}

.banner-swiper {
	height: 360rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.banner-item {
	position: relative;
	width: 100%;
	height: 100%;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.banner-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(7, 133, 207, 0.8) 0%, rgba(37, 164, 239, 0.6) 100%);
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.banner-title {
	font-size: 48rpx;
	color: #fff;
	font-weight: 700;
	margin-bottom: 16rpx;
}

.banner-subtitle {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 32rpx;
}

.banner-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: rgba(255, 255, 255, 0.2);
	padding: 12rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #fff;
}

/* 3. 第三部分：左侧小图片和右侧上下图片 */
.section-three {
	display: flex;
	padding: 0 32rpx;
	margin-bottom: 32rpx;
	position: relative;
	z-index: 1;
	gap: 24rpx;
}

.left-image {
	position: relative;
	width: 332rpx;
	height: 300rpx;
	background: linear-gradient(180deg, #B7CCFF 0%, #709FF6 100%);
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 28rpx;

	.text-box {
		width: 100%;
		height: 100%;
		padding: 28rpx;
		box-sizing: border-box;

		.text-title {
			font-weight: bold;
			font-size: 44rpx;
			color: #FFFFFF;
			text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}

		.text-subtitle {
			font-size: 24rpx;
			color: #fff;
			margin-top: 10rpx;
			margin-bottom: 40rpx;
		}

		.text-button {
			width: 140rpx;
			height: 48rpx;
			background: linear-gradient(180deg, #0785CF 0%, #006CAC 100%);
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 108, 172, 0.2);
			border-radius: 16rpx 0 16rpx 0;
			font-size: 24rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.icon7 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

.right-images {

	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.top-image {
	background: linear-gradient(270deg, #FAD59A 0%, #FBBC81 100%);
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 28rpx 28rpx 28rpx 28rpx;

	.text-box {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		z-index: 2;

		.text-subtitle {
			position: relative;
			font-size: 24rpx;
			color: #fff;
			margin-bottom: 10rpx;

			&::before {
				content: '';
				position: absolute;
				bottom: -5rpx;
				left: 0;
				width: 20rpx;
				height: 4rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}

		.text-title {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}
	}
}

.bottom-image {
	background: linear-gradient(90deg, #9E98FB 0%, #C9CCFF 100%);
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 28rpx 28rpx 28rpx 28rpx;

	.text-box {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 16rpx 24rpx;
		box-sizing: border-box;
		z-index: 2;

		.text-subtitle {
			position: relative;
			font-size: 24rpx;
			color: #fff;
			margin-bottom: 10rpx;

			&::before {
				content: '';
				position: absolute;
				bottom: -5rpx;
				left: 0;
				width: 20rpx;
				height: 4rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}

		.text-title {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}
	}
}

.top-image,
.bottom-image {
	width: 332rpx;
	height: 140rpx;
	position: relative;
}

.icon5,
.icon6 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

/* 4. 第四部分：按钮图片网格 */
.button-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
	padding: 28rpx 32rpx;
	margin:0 32rpx 32rpx;
	height: 380rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.08);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.grid-icon {
	width: 80rpx;
	height: 80rpx;
}

.grid-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
	margin-top: -10rpx;
}

/* 5. 第五部分：通知 */
.notice-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #FFFFFF;
	margin: 0 32rpx;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(7,133,207,0.1);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	padding: 2rpx;
}

.notice-content {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 14rpx 16rpx;
	background: linear-gradient( 180deg, #B3CEFF 0%, #C8DBFF 100%);
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	box-sizing: border-box;
}

.notice-text {
	font-size: 28rpx;
	color: #333;
	margin-left: 12rpx;
	flex: 1;
	font-size: 24rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	.tip {
		font-size: 28rpx;
		color: #222222;
		font-weight: bold;
		margin-right: 12rpx;
	}
}

.six-box {
	margin: 28rpx 32rpx 0;
}

/* 6. 下面部分：静态模块 */

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24rpx;
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;

	.icon-remen {
		color: #FF2B2B;
		margin-right: 5rpx;
	}

	.icon-xianshimiaosha-06 {
		color:#DF9824;
		margin-right: 5rpx;
	}
}

.more-btn {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 20rpx;
	color: #444;
}

/* 热门推荐 */
.recommend-section {
	width: 332rpx;
	height: 270rpx;
	padding: 16rpx 20rpx;
	box-sizing: border-box;
	background: linear-gradient( 180deg, #E6F6FF 0%, #FFFFFF 20%, #FFFFFF 100%);
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.recommend-list {
	display: flex;
	justify-content: space-between;
}

.recommend-item {
	width: 140rpx;
	background: #fff;
	border-radius: 8rpx;
	overflow: hidden;
}

.top-box {
	position: relative;
	width: 100%;
	height: 140rpx;
}

.recommend-image {
	width: 100%;
	height: 140rpx;
}


.recommend-name {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 26rpx;
	text-align: center;
	line-height: 26rpx;
	border-radius: 0 0 8rpx 8rpx;
	font-size: 16rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20rpx);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recommend-price {
	font-size: 24rpx;
	color: #FF4444;
	align-items: baseline;

	.flex {
		align-items: baseline;
	}

	.time {
		color: #999999;
	}
}

/* 限时秒杀 */
.flash-sale-section {
	width: 332rpx;
	height: 270rpx;
	padding: 16rpx 20rpx;
	box-sizing: border-box;
	background: linear-gradient( 180deg, #E6F6FF 0%, #FFFFFF 20%, #FFFFFF 100%);
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.flash-list {
	display: flex;
	justify-content: space-between;
}

.flash-item {
	width: 140rpx;
	background: #fff;
	border-radius: 8rpx;
	overflow: hidden;
}

.flash-image {
	width: 100%;
	height: 140rpx;
}


.flash-name {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 26rpx;
	text-align: center;
	line-height: 26rpx;
	border-radius: 0 0 8rpx 8rpx;
	font-size: 16rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(20rpx);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flash-price {
	font-size: 24rpx;
	color: #FF4444;
	align-items: baseline;

	.flex {
		align-items: baseline;
	}

	.time {
		color: #999999;
	}
}

/* 服务精选 */
.featured-section {
	position: relative;
	margin: 28rpx 32rpx 0;
	padding: 28rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
	border-radius: 20rpx 20rpx 20rpx 20rpx;

	.section-header {
		justify-content: flex-start;

		.icon-diamond {
			color: #0785CF;
			margin-right: 4rpx;
		}
	}
}

.featured-icon {
	position: absolute;
	width: 84rpx;
	height: 81rpx;
	right: 28rpx;
	top: 20rpx;
	z-index: 1;
}



.section-title {
	position: relative;
	.sub-tit {
		position: absolute;
		font-weight: 800;
		font-size: 48rpx;
		color: rgba(7,133,207,0.08);
		top: -10rpx;
	}
	.tit {
		position: relative;
		font-size: 32rpx;
		color: #222222;

		&::after {
			position: absolute;
			width: 100%;
			height: 10rpx;
			content: "";
			bottom: 0;
			left: 0;
			border-radius: 10rpx 0 0 10rpx;
			z-index: -1;
			background: linear-gradient(to right, #9ed3f3, transparent);
		}
	}
}

.featured-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;

	.flex {
		align-items: baseline;
		justify-content: flex-start;
	}
}

.featured-card {
	background: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0rpx 4rpx 20rpx rgba(0,0,0,0.08);
}

.featured-top {
	position: relative;
}

.featured-name-overlay {
	width: 100%;
	height: 32rpx;
	line-height: 32rpx;
	font-size: 24rpx;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.price {
	color: #FF4444;
	align-items: baseline;
	margin-top: 16rpx;

	.flex {
		align-items: baseline;
	}

	.time {
		color: #999999;
	}
}

.featured-meta {
	padding: 16rpx;
}

.list-footer {
	padding: 20rpx 0 40rpx;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
</style>
